<template>
	<view :class="['ff-windows']" :id="$ff.id" :style="[windowsStyle]">
		<view :class="['ff-body']" :style="[bodyStyle]">
			<slot name="default"></slot>
		</view>
		<view :class="['ff-bottom-padding']" :style="[bottomPaddingStyle]"></view>
		<view :class="['ff-bottom']" :style="[bottomStyle]">
			<slot name="bottom"></slot>
		</view>
	</view>
</template>
<script>
	export default {
		name: "ff-windows",
		options: {
			virtualHost: true
		},
		emits: ["update:modelValue", "input", "change"],
		props: {
			value: {
				type: [String],
				default: undefined,
			},
			modelValue: {
				type: [String],
				default: undefined,
			},
			isSingleDisplay: {
				type: Boolean,
				default: undefined,
			},
			bottomHeight: {
				type: String,
				default: undefined,
			},
		},
		data() {
			return {
				tabbars: [],
				children: [],
				bottomHeight: null,
			}
		},
		computed: {
			model: {
				get() {
					return this.getValue()
				},
				set(newValue) {
					this.setValue(newValue)
				}
			},
			windowsStyle() {
				let style = {}
				let varStylehandle = (prefix, config) => {
					if (config) {
						for (let i = 0; i < Object.keys(config).length; i++) {
							if (Object.prototype.toString.call(config[Object.keys(config)[i]]) == '[object Object]') {
								varStylehandle(prefix + "-" + Object.keys(config)[i], config[Object.keys(config)[i]])
							} else {
								style[prefix + "-" + Object.keys(config)[i]] = config[Object.keys(config)[i]]
							}
						}
					}
				}
				varStylehandle("--ff", this.$ff.config.colors)
				varStylehandle("--ff", this.$ff.config.styles)
				return style
			},
			bottomPaddingStyle() {
				return {

				}
			},
			bottomStyle() {
				let style = {
					height: this.$ff.props.bottomHeight,
				}
				return style
			},
			bodyStyle() {
				return {
					width: '100%',
					height: `calc(100% - ${this.bottomStyle.height})`,
				}
			},
		},
		watch: {

		},
		mounted() {

		},
		// #ifdef VUE2
		destroyed() {

		},
		// #endif
		// #ifdef VUE3
		unmounted() {

		},
		// #endif
		methods: {
			getValue() {
				// #ifdef VUE2
				return this.value
				// #endif

				// #ifdef VUE3
				return this.modelValue
				// #endif
			},
			setValue(val) {
				// #ifdef VUE2
				this.$emit("input", val)
				// #endif
				this.$emit("update:modelValue", val)
				this.$emit("change", val)
			},
		},
	}
</script>
<style scoped>
	@import "../../librarys/css/components.css";

	.ff-windows {
		position: fixed;
		width: 100%;
		height: 100%;
		max-width: 100vw;
		max-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.ff-body {
		width: 100%;
		height: 100%;
	}

	.ff-bottom {
		width: 100%;
		position: absolute;
		bottom: 0px;
		left: 0px;
	}
</style>